<template>
	<view class="content">
		<view class="login-bg">
			<view class="login-card">
				<view class="login-head">
					<u-tabs  active-color="#FF978D"  inactive-color ="#FFBB69" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				
				<view v-if="current == 0">
					<view class="login-input login-margin-b">
						<input placeholder="请输入用户名"  v-model="username" maxlength="20"/>
					</view>
					<view class="login-input"> 
					   <input type="password"  maxlength="16" v-model="password" placeholder="请输入密码" />
					</view>
					<view class="forget-input forget-margin-b">
						<view class="verify-left">
							<input type="number" maxlength="6" v-model="code" @input="fomatCode" placeholder="请输入验证码" />
						</view>
						<view class="verify-right">
							<CodeImg type="login"/>
						</view>
					</view>
				</view>
				<view v-else>
					 <view class="login-input login-margin-b">
					 	<input type="number" maxlength="11" v-model="phone" @input="fomatPhone"   placeholder="请输入您的手机号" />
					 </view>
					 
					 <view class="forget-input forget-margin-b">
					 	<view class="verify-left">
					 		<input type="number" maxlength="6" v-model="code" @input="fomatCode" placeholder="请输入验证码" />
					 	</view>
					 	<view class="verify-right">
					 		<CodeImg type="login"/>
					 	</view>
					 </view>
					 <view class="forget-input forget-margin-b">
					 	<view class="verify-left">
					 		<input type="number" maxlength="6" v-model="smsCode" @input="fomatSmsCode" placeholder="请输入验证码" />
					 	</view>
					 	<view class="verify-right">
					 		<button class="verify-btn" type="primary" @click="send">获取验证码</button>
					 	</view>
					 </view>
				</view>
				<view class="login-function">
					<view class="login-forget" @click="go_forget">忘记密码</view>
					<view class="login-register" @click="go_register">快速注册></view>
				</view>
			</view>
		</view>
		<view class="login-btn">
			<button class="landing" type="primary" @click="submit()">登陆</button>
		</view>
	</view>
</template>

<script>
	import CodeImg from '@/app/components/CodeImg.vue'
	import {mapState,mapMutations} from 'vuex';
	import {  api } from '@/app/api.js'  
	import { encrypt,decrypt } from "@/lib/jsencrypt";
	export default {
		components:{
			CodeImg
		},
		computed: { ...mapState(['uuid']),},
		data() {
			return {
			 list: [{name: '账号密码登陆'}, {name: '手机号登陆'}, ],
			 current: 0,
			 "nickName": "",
			 "username": "",
			 "password": "",
			 "phone": '',
			 "code": '',
			 "smsCode": '',
			 
			}
		},
		onLoad() {

		},
		methods: {
			fomatPhone(e){
				   var th= this;
					this.formatNum(e,0);
					this.$nextTick(() => {  
					 th.phone = e.target.value   			 
					})  	
			},
			fomatCode(e){ 
				   var th= this;
					this.formatNum(e,0);
					this.$nextTick(() => {  
					 th.code = e.target.value   			 
					})  	
			},
			fomatSmsCode(e){
				   var th= this;
					this.formatNum(e,0);
					this.$nextTick(() => {  
					 th.smsCode = e.target.value   			 
					})  	
			},
			
			change(e){
				 console.log("e: ",e); this.current = e;
			},
			go_forget(){
				uni.navigateTo({url: '/app/user/forget'})
			},
			go_register(){
				uni.navigateTo({url: '/app/user/register'})
			}, 
			send() {
			  if(this.regPhone(this.phone)) return;
			  if(this.isEmpty(this.code)) return uni.showToast({title: '图形验证码不能为空',icon:'none',duration: 2000}) 
			
			  api("/message/message/sendLoginCode", {"code": this.code,"phone": encrypt(this.phone),"uuid": this.uuid}).then(data=>{
			  		  console.log("data: ",data);
					  if(data.code == 500){
						  uni.showToast({title: data.msg,icon:'none',duration: 2000})  
					  }else{
						  uni.showToast({title: "已发送图形验证码",icon:'none',duration: 2000})  
					  }
			  })
			},
			submit() {
				    var th = this;
					var url = this.current == 0 ? "/loginByPwd":"/loginByPhone";
					var data = {
						"username": this.username,
						"password": encrypt( this.password ), 
						 "code": this.code,
						 "uuid": this.uuid,
					} 
					if(this.current == 0){
						if(this.isEmpty(this.username)) return uni.showToast({title: '用户名不能为空',icon:'none',duration: 2000}) 
						if(this.isEmpty(this.password)) return uni.showToast({title: '密码不能为空',icon:'none',duration: 2000}) 
						if(this.isEmpty(this.code)) return uni.showToast({title: '图形验证码不能为空',icon:'none',duration: 2000}) 
					}else{
						if(this.regPhone(this.phone)) return; 
						if(this.isEmpty(this.code)) return uni.showToast({title: '图形验证码不能为空',icon:'none',duration: 2000}) 
						if(this.isEmpty(this.smsCode)) return uni.showToast({title: '手机验证码不能为空',icon:'none',duration: 2000}) 
						data = { 
							"phone": encrypt( this.phone ), 
							 "smsCode": this.smsCode,
							 "uuid": this.uuid,
						}
					} 
					api(url,data).then(data=>{
						 if(data.code == 500){
						 	uni.showToast({title: data.msg,icon:'none',duration: 2000})  
						 }else{
						    th.code = ""
							th.smsCode = ""
							uni.showToast({title: "登陆成功",icon:'none',duration: 1000})  
							th.$store.state.roles =  data.roles;
							th.$store.state.token =  data.token; 
							uni.setStorageSync('token',data.token)
							setTimeout(() => {
								 uni.switchTab({url: "/app/index",});
							 }, 1000);
						 }
					})
			},
			
		}
	}
</script>

<style>
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.login-btn{
		padding: 10upx 20upx; 
		margin-top: 550upx;
	}
	.login-function{
		overflow: auto;
		padding: 20upx 20upx 30upx 20upx;
	}
	.login-forget{
		float: left;
		font-size: 26upx;
		color: #999;
	}
	.login-register{
		color: #666;
		float: right;
		font-size: 26upx;

	}
	.login-input input{
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.login-margin-b{
		margin-bottom: 25upx;
	}
	.login-input{
		padding: 10upx 20upx;
	}
	.login-head{
		font-size: 34upx;
		text-align: center;
		padding: 25upx 10upx 55upx 10upx;
	}
	.login-card{
		background: #fff;
		border-radius: 12upx;
		padding: 10upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
		position: relative;
		margin-top: 120upx;
	}
	.login-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#FF978D, #FFBB69);
	}
	.verify-left{
		width: calc(100% - 260upx);
	}
	.verify-right{
		padding-left: 20upx;
	}
	.verify-btn{
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		width: 240upx;
		border-radius: 8upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.verify-left,.verify-right{
		float: left;
	}
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.forget-btn{
		padding: 10upx 20upx;
		margin-top: 800upx;
	}
	
	.forget-input input{
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.forget-margin-b{
		margin-bottom: 25upx;
	}
	.forget-input{
		padding: 10upx 20upx;
		overflow: auto;
	}
	.forget-card{
		background: #fff;
		border-radius: 12upx;
		padding: 60upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
		position: relative;
		margin-top: 120upx;
	}
	.forget-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#FF978D, #FFBB69);
	}
</style>
